<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    table {
      width: 600px;
      cursor: pointer;
    }

    table td {
      text-align: center;
    }

    table th {
      background-color: blueviolet;
    }

    table tr {
      background-color: pink;
    }
  </style>
</head>

<body>
  <form id="dv">
    请输入姓名:
    <input type="text" name="" id="uname"/>
    <br/> 请输入邮箱:
    <input type="email" value="" name="email" id="email"/>
    <br>
    <input type="button" value="添加" id="btn" />
  </form>

  
  <table border="1" cellpadding="0" cellspacing="0" id="tb">
    <thead>
      <tr>
        <th>姓名</th>
        <th>邮箱</th>
      </tr>
    </thead>
    <tbody id="tbd">
      <tr>
        <td>小黑</td>
        <td>xiaohei@126.com</td>
      </tr>
    </tbody>
  </table>
 
</body>
<script>
    // 获取第一个div盒子方便之后用子元素的方法获取两个输入框的值
    var dv=document.querySelector('#dv')
    // 获取事件源元素
    var btn=document.querySelector('#btn')
    // 获取表格主体之后用来添加内容
    var tbd=document.querySelector('#tbd')
    // 给事件源创建事件类型
    btn.onclick=function(){
        // 判断两个输入框的值是否为空有一个则提示用户输入完整
        if(dv.children[0].value==''||dv.children[2].value==''){
            alert('请将信息输入完整')
            // return后面的分号一定要加不然不会及时终止
            return;
            
        }
        // 创建一个元素<tr></tr>并赋值给tr
        var tr=document.createElement('tr')
        // console.log(tr)
        // 将tr放到tbd（tbody）中去
        tbd.appendChild(tr)
        // 创建两个元素分别用来存放从两个输入框中获取到的值
        var uname=document.createElement('td')
        var uemail=document.createElement('td')
        // 获取两个输入框的值同时分别赋值给上面创建的两个元素
        uname.innerHTML=dv.children[0].value
        uemail.innerHTML=dv.children[2].value
        // 将uname和uemail放到tbd的最后一个tr元素中
        tbd.children[tbd.children.length-1].appendChild(uname)
        tbd.children[tbd.children.length-1].appendChild(uemail)
    }

</script>
</html>